<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>解忧栈-你心中理想的港湾</title>
		<!-- 引入 Bootstrap -->
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		
		<div class="container" id="dvdata">
		<!--1.头  -->	
		<div class="col-lg-12">
			<nav class="navbar navbar-default" role="navigation">
			    <div class="navbar-header col-lg-4">
			       <img src="images/logo.PNG" style="height: 60px;"/>
			    </div>
			    <div class="col-lg-offset-4 col-lg-4">
			        <ul class="nav navbar-nav">
			            <li class="active"><a href="index.html">首页</a></li>
			            <li><a href="circlelist.html">圈子</a></li>
			            <li><a href="worried.html">忧虑</a></li>
						<li><a href="about.html">关于</a></li>
			        </ul>
			    </div>
			</nav>
		</div>
		<!-- 2.轮播 -->
		<div class="col-lg-12">
			<div class="col-md-12 column">
						<div class="carousel slide" id="carousel-341620">
							<ol class="carousel-indicators">
								<li class="active" data-slide-to="0" data-target="#carousel-341620"></li>
								<li data-slide-to="1" data-target="#carousel-341620"></li>
								<li data-slide-to="2" data-target="#carousel-341620"></li>
							</ol>
							<div class="carousel-inner">
								<div class="item active">
									<img alt="" src="http://cdn.ibootstrap.cn/lorempixel.com/1600/500/sports/1/default.jpg" />
									<div class="carousel-caption">
										<h4>
											First Thumbnail label
										</h4>
									</div>
								</div>
								<div class="item">
									<img alt="" src="http://cdn.ibootstrap.cn/lorempixel.com/1600/500/sports/2/default.jpg" />
									<div class="carousel-caption">
										<h4>
											Second Thumbnail label
										</h4>
									</div>
								</div>
								<div class="item">
									<img alt="" src="http://cdn.ibootstrap.cn/lorempixel.com/1600/500/sports/3/default.jpg" />
									<div class="carousel-caption">
										<h4>
											Third Thumbnail label
										</h4>
									</div>
								</div>
							</div> <a class="left carousel-control" href="#carousel-341620" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-341620" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
						</div>
					</div>
		</div>	
		<!-- 3、热门圈子 -->	
		<div class="row">
			<div class="col-lg-12">
				<div class="page-header">
					<h1>热门圈子 <small style="float: right;">查看更多</small></h1>
				</div>
			</div>
			<div class="col-lg-4" v-for="c in circles">
				<div class="thumbnail" @click="tzdetail(c.id)">
								<img alt="300x200" v-bind:src="c.preurl" />
								<div class="caption">
									<h3>
										{{c.title}}
									</h3>
									<p>
										{{c.info}}
									</p>
									<p>
										{{c.ctime}}
									</p>
								</div>
						</div>
				</div>		
			</div>	
		<!-- 4、热门忧虑 -->		
		<div class="row">
			<div class="col-lg-12">
				<div class="page-header">
					<h1>热门忧虑 <small style="float: right;">查看更多</small></h1>
				</div>
			</div>
			<div class="col-lg-4" v-for="w in worrids">
				<div class="thumbnail">
								<img alt="300x200" :src="w.preurl" />
								<div class="caption">
									<h3>
										{{w.title}}
									</h3>
									<p>
										{{w.info}}
									</p>
									<p>
										{{w.ctime}}
									</p>
								</div>
					</div>
				</div>	
			</div>
						
			<!-- 5.底部 -->
			<div class="col-lg-12" style="position: relative;top:20px; height: 40px;text-align: center;background-color: aliceblue;">
				<p style="height: 40px;text-align: center;width: 100%;padding-top: 10px;">版权所有© 2013-2020菜鸟教程  runoob.com保留所有权利。备案号：闽ICP备15012807号-1</p>
			</div>
		</div>
		<script>
			var vm=new Vue({
				el:"#dvdata",
				data:{
					circles:[
						{
							id:1,
							title:"圈子标题",
							info:"记录生活，记录格局",
							ctime:"2020年12月28日 17：00",
							preurl:"http://cdn.ibootstrap.cn/lorempixel.com/600/200/people/default.jpg"
						}
					],
					worrids:[
						{
							id:1,
							title:"今天高兴",
							info:"记录生活，记录格局",
							ctime:"2020年12月28日 17：00",
							preurl:"http://cdn.ibootstrap.cn/lorempixel.com/600/200/people/default.jpg"
						},
						{
							id:2,
							title:"明天悲哀",
							info:"记录生活，记录格局",
							ctime:"2020年12月28日 17：00",
							preurl:"http://cdn.ibootstrap.cn/lorempixel.com/600/200/people/default.jpg"
						},
						{
							id:3,
							title:"雪",
							info:"记录生活，记录格局",
							ctime:"2020年12月28日 17：00",
							preurl:"http://cdn.ibootstrap.cn/lorempixel.com/600/200/people/default.jpg"
						},
						{
							id:4,
							title:"北风",
							info:"记录生活，记录格局",
							ctime:"2020年12月28日 17：00",
							preurl:"http://cdn.ibootstrap.cn/lorempixel.com/600/200/people/default.jpg"
						},
						{
							id:5,
							title:"冰",
							info:"记录生活，记录格局",
							ctime:"2020年12月28日 17：00",
							preurl:"http://cdn.ibootstrap.cn/lorempixel.com/600/200/people/default.jpg"
						}
					]
				},
				methods:{
					tzdetail(id){
						console.log(id);
						location.href="circledetail.html?id="+id;
					}
				}
			})
			//页面加载的时候执行
			$(function(){
				$.get("api/circle/allTop.do",null,function(res){
					if(res.code==1){
						vm.circles=res.data;
					}
				})
			})
		</script>
	</body>
</html>
